<template>
	<view class="pageItem">
		<view class="head">
			<view class="seach">
				<image class="s_icon" @click="to_search" src="/static/img/seach.png" mode="widthFix"/>
				<input class="h_input" @confirm="to_search" confirm-type="search"  type="text" v-model="keyword" :placeholder="$t('index.seach_tip')" placeholder-class="input_no_txt"/>
			</view>
		</view>
		<view class="main">
			<view class="movie_item">
				<view class="m_con">
					<block v-for="(item,index) in list" :key="index">
						<!-- #ifdef APP -->
						<view class="movie2" @click.stop="$r('/pages/popular/shortDetail?id='+item.id)">
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie2" @click.stop="$r('/pages/popular/shortDetail_h5?id='+item.id)">
						<!-- #endif -->
							
							<view  @click.stop="to_col(index,item.id,1)" class="iconfont star" v-if="!cv_ids.includes(item.id)">&#xe607;</view>
							<view  @click.stop="to_col(index,item.id,0)" class="iconfont star ss" v-else>&#xe6b1;</view>
							<view class="tip">{{$t('index.hot')}}</view>
							<view class="msg">{{item.episode_num}} {{$t('acc.episode')}}</view>
							<image class="img" :src="item.logo"></image>
							<view class="txt">{{show_pt(item)}}</view>
							<view class="txt2">
							  <u-parse :content="item.remark"></u-parse>
							</view>
							<view class="txt3" v-if="index == 0"><label class="lb">{{$t('index.top')}}1</label></view>
							<view class="txt4" v-else>{{get_cate_name(item.cate_id)}}</label></view>
						</view>
					</block>
					
					<block v-if="empty_show">
						<view style="width:100%;margin-top: 20vw;" v-if="list.length==0">
							<u-empty mode="data" iconSize="120"  :text="$t('nodata')" ></u-empty>
						</view>
					</block>
					
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	export default {
		mixins : [lang_mix],
		data() {
			return {
				type: '0'  ,//0 搜索或更多短剧  1本周   2最新
				load_type : 'more',
				loading : 0,
				empty_show : 0, 
				page : 1,
				cate_id : 0,
				cv_ids : [],
				list:[
					
				],
				keyword:''
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onReachBottom() {
			 this.loadData();
		},
		onLoad(e) {
			if(e.id){
				this.cate_id = parseInt(e.id);
			}
			if(e.type){
				this.type = e.type;
				let nav_tit = ['seach','week_hot','latest_hot'];
				uni.setNavigationBarTitle({
					title: this.$t([`index.${nav_tit[this.type]}`])
				})
			}else if(e.title){
				uni.setNavigationBarTitle({
					title: e.title
				})
			}
			this.initCate();
			this.loadData();
					
		},
		methods:{
			login_modal(){
				uni.showModal({
					title: this.$t('system.tip'),
					content: this.$t('system.tip4'),
					success:  (res) =>{
						if (res.confirm) {
							  this.$r('/pages/public/login','rel')
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});	
			},
			to_col(index,id,flag){
				if(!this.hasLogin){
					this.login_modal();
					return false;
				}
				uni.$u.throttle(()=>{
					this.real_col(index,id,flag);
				}, 600)
			},
			real_col(index,id,flag){
				let url = this.site_url + 'api/auth/member/col_hand';
				let params = {
					id :id,
					is_col : flag
				};
				this.areq(url,params,'POST').then(res=>{
					if(res.code == 1){
						if(flag){
							 this.cv_ids.push(id);
						}else{
							 let index = this.cv_ids.indexOf(id);  
							 if (index > -1) {  
							     this.cv_ids.splice(index, 1);  
							 }
						}
						this.$forceUpdate();
					}	
				})	
			},
			loadCol(){
				let url = this.site_url + 'api/auth/member/my_col_ids';
				this.areq(url).then(res=>{
					if(res.code == 1){
							this.cv_ids = res.data; 
					}
				})
				
			},
			to_search(){
				if(this.keyword == ''){
					//return false;
				}
				uni.$u.throttle(this.real_search, 1500)
			},
			real_search(){
				this.pageinit();
			},
			pageinit(){
				this.load_type = 'more';
				this.page = 1;
				this.list = [];
				this.loadData();
			},
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/index/search_list?page='+this.page;
				   let params = {
					 keyword : this.keyword,
					 type : this.type,
					 cate_id : this.cate_id  
				   };
					this.areq(url,params,'POST').then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						if(this.hasLogin){
							this.loadCol();
						}
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 10)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
		}
	}
</script>

<style lang="scss">
page{
	background: $main_bg_color;
}
.head{
	width: 100%;
	position: fixed;
	z-index: 98;
	padding: calc(var(--status-bar-height) + 3vw) 4% 2vw;
	background: $main_color2;
	.seach{
		width: 100%;
		padding: 0 4vw;
		background: $main_color2_s;
		height: 12vw;
		display: flex;
		align-items: center;
		border-radius: 7vw;
		.h_icon{
			font-size: 5vw;
			color: $main_color_s;
		}
		.h_input{
			flex: 1;
			margin: 0 3vw;
			line-height: 8vw;
			color: $main_color5;
		}
		.s_icon{
			width: 5vw;
		}
	}
}
.bg_item {
	@include bg_item(60vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 16vw) 4% 0;
	.movie_item{
		width: 100%;
		margin-top: 1vw;
		.m_con{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.movie2:not(:nth-child(2n+1)){
				margin-left: 2%;
			}
			.movie2{
				width: 49%;
				margin-top: 3.2vw;
				position: relative;
				background: $main_color2_s;
				border-radius: 2vw;
				padding-bottom: 3vw;
				.star{
					position: absolute;
					z-index: 2;
					width: 8vw;
					height: 8vw;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 5vw;
					top: 0;
					left: 0;
					border-radius: 2vw 0 2vw 0;
					background: rgba(0, 0, 0, 0.3);
				}
				.ss{
					color: $star_s;
				}
				.tip{
					position: absolute;
					z-index: 2;
					padding: 0.5vw 2vw;
					background: #FE5F15;
					color: #fff;
					font-size: 2.6vw;
					border-radius: 0 2vw 0 3vw;
					right: 0;
					top: 0;
				}
				.msg{
					position: absolute;
					z-index: 2;
					font-size: 3.2vw;
					color: #fff;
					top: 48vw;
					right: 2vw;
					padding: 0.5vw 2vw;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 1vw;
				}
				.img{
					width: 100%;
					height: 55vw;
					border-radius: 2vw;
					z-index: 1;
					position: relative;
				}
				.txt{
					width: 100%;
					padding: 0.5vw 2vw 0;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
				}
				.txt2{
					width: 100%;
					padding: 1vw 2vw 0;
					font-size: 3.2vw;
					color: $main_color4;
					@include text_over_style(1);
				}
				.txt3{
					width: 100%;
					display: flex;
					margin-top: 2.5vw;
					.lb{
						padding: 0 2vw;
						background: #FEEFE8;
						color: #FD541E;
						font-size: 3.2vw;
						height: 5.5vw;
						line-height: 5.5vw;
						border-radius: 1vw;
					}
				}
				.txt4{
					width: 100%;
					padding: 2.5vw 2vw 0;
					line-height: 5.5vw;
					font-size: 3.2vw;
					color: $main_color4;
					@include text_over_style(1);
				}
			}
		}
	}
}
</style>
